<template>
  <!-- 统计 -->
  <div class="EmergencyList">
    <div class="flex location-wrap">
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EDManagement' }">应急处置</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/DisasterReporting' }">灾情信息</el-breadcrumb-item>
        <el-breadcrumb-item>灾情信息统计</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="box">
      <!-- 列表筛选 -->
      <filterTitle @query="query" @reset="reset" :form="form" :formData="formData" labelWidth="140px"
        @node-click="handleSelectTreeTabulation" @change="selectChange">
      </filterTitle>
      <!-- 设备部 列表表格  -->
      <div>
        <LsdTable slot="gjxm" @select="handleSelectionChange" :paginationAtrrs="paginationAtrrs" :compRef="table.compRef"
          ref="gjxm" @pageChange="handleSizeChange" :columns="table.columns" :title="table.title" :actions="table.actions"
          :tableData="table.tableData" :tableAttr="table.tableAttr" :isShowPage="table.isShowPage"
          :isSelectFlag="table.isSelectFlag" :isSequenceFlag="table.isSequenceFlag" @onActionClick="onActionClick" />
      </div>
    </div>
    <!-- 输电线路 -->
    <el-dialog title="受损设备查看" :visible.sync="dialogTableVisible" width="50%">
      <el-table :data="tableData111" :header-cell-style="{
        background: '#B1C8F9',
        color: '#000',
      }" style="width: 100%" border>
        <el-table-column prop="lineName" align="left" label="停运输电线路名称" width="200">
        </el-table-column>
        <el-table-column prop="voltageClasses" align="center" label="电压等级" width="100">
        </el-table-column>
        <el-table-column prop="unitName" align="left" label="所属单位">
        </el-table-column>
        <el-table-column prop="tripCause" align="left" label="停运/跳闸原因">
        </el-table-column>
        <el-table-column prop="blackoutTime" align="center" width="180" label="停电时间">
        </el-table-column>
        <el-table-column prop="recoverTime" align="center" width="180" label="复电时间">
        </el-table-column>
      </el-table>
      <div style="height: 20px"></div>
      <div style="margin-top: 10px; float: right" class="InformationList-table-pag flexBetween">
        <div class="fontSize14">共{{ tableData111.length }}条数据，共{{ pageNum }}页</div>
        <el-pagination background layout="prev, pager, next" :total="total" @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </el-dialog>
    <!-- 变电站 -->
    <el-dialog title="受损设备查看" :visible.sync="dialogTransformerSubstation" width="50%">
      <el-table :data="tableData111" :header-cell-style="{
        background: '#B1C8F9',
        color: '#000',
      }" style="width: 100%" border>
        <el-table-column prop="lineName" align="left" label="停运变电站名称" width="200">
        </el-table-column>
        <el-table-column prop="unitName" align="left" label="所属单位">
        </el-table-column>
        <el-table-column prop="voltageClasses" align="center" label="电压等级" width="100">
        </el-table-column>
        <el-table-column prop="tripCause" align="left" label="停运/跳闸原因">
        </el-table-column>
        <el-table-column prop="blackoutTime" align="center" width="180" label="停电时间">
        </el-table-column>
        <el-table-column prop="recoverTime" align="center" width="180" label="复电时间">
        </el-table-column>
      </el-table>
      <div style="height: 20px"></div>
      <div style="margin-top: 10px; float: right" class="InformationList-table-pag flexBetween">
        <div class="fontSize14">共{{ tableData111.length }}条数据，共{{ pageNum }}页</div>
        <el-pagination background layout="prev, pager, next" :total="total" @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </el-dialog>
    <!-- 配电 -->
    <el-dialog title="受损设备查看" :visible.sync="dialogDistribution" width="50%">
      <el-table :data="tableData111" :header-cell-style="{
        background: '#B1C8F9',
        color: '#000',
      }" style="width: 100%" border>
        <el-table-column prop="lineName" align="left" label="停运配电线路名称" width="200">
        </el-table-column>
        <el-table-column prop="unitName" align="left" label="所属单位">
        </el-table-column>
        <el-table-column prop="voltageClasses" align="center" label="电压等级" width="100">
        </el-table-column>
        <el-table-column prop="tripCause" align="left" label="停运/跳闸原因">
        </el-table-column>
        <el-table-column prop="blackoutTime" align="center" width="180" label="停电时间">
        </el-table-column>
        <el-table-column prop="recoverTime" align="center" width="180" label="复电时间">
        </el-table-column>
      </el-table>
      <div style="height: 20px"></div>
      <div style="margin-top: 10px; float: right" class="InformationList-table-pag flexBetween">
        <div class="fontSize14">共{{ tableData111.length }}条数据，共{{ pageNum }}页</div>
        <el-pagination background layout="prev, pager, next" :total="total" @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </el-dialog>
    <!-- 台区及用户 -->
    <el-dialog title="停运台区查看" :visible.sync="dialogShutdownStationArea" width="50%">
      <el-table :data="tableData111" :header-cell-style="{
        background: '#B1C8F9',
        color: '#000',
      }" style="width: 100%" border>
        <el-table-column prop="lineName" align="left" label="停运台区名称" width="220">
        </el-table-column>
        <el-table-column prop="unitName" align="left" label="所属单位">
        </el-table-column>
        <el-table-column prop="location" align="left" label="位置">
        </el-table-column>
        <el-table-column prop="blackoutTime" align="center" width="220" label="停电时间">
        </el-table-column>
        <el-table-column prop="recoverTime" align="center" width="180" label="复电时间">
        </el-table-column>
      </el-table>
      <div style="height: 20px"></div>
      <div style="margin-top: 10px; float: right" class="InformationList-table-pag flexBetween">
        <div class="fontSize14">共{{ tableData111.length }}条数据，共{{ pageNum }}页</div>
        <el-pagination background layout="prev, pager, next" :total="total" @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </el-dialog>
    <!-- 重要用户 -->
    <el-dialog title="停电重要用户查看" :visible.sync="dialogImportantUsers" width="50%">
      <el-table :data="tableData111" :header-cell-style="{
        background: '#B1C8F9',
        color: '#000',
      }" style="width: 100%" border>
        <el-table-column prop="lineName" align="left" label="停电重要用户" width="220">
        </el-table-column>
        <el-table-column prop="grade" align="center" label="客户等级" width="100">
        </el-table-column>
        <el-table-column prop="unitName" align="left" label="所属单位">
        </el-table-column>
        <el-table-column prop="location" align="left" label="位置">
        </el-table-column>
        <el-table-column prop="blackoutTime" align="center" width="220" label="停电时间">
        </el-table-column>
        <el-table-column prop="recoverTime" align="center" width="180" label="复电时间">
        </el-table-column>
      </el-table>
      <div style="height: 20px"></div>
      <div style="margin-top: 10px; float: right" class="InformationList-table-pag flexBetween">
        <div class="fontSize14">共{{ tableData111.length }}条数据，共{{ pageNum }}页</div>
        <el-pagination background layout="prev, pager, next" :total="total" @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getStatisticInfoData, getCircuitDetailData, getInfoDetailList, statisticInfoSearchPage, emergencyEventsPageSelete } from "@/api/EmergencyDisposal/zqbs.js";
// 公共组件接口
import { getDictByGroupEmergency, GetOrgTree } from "@/api/common.js";
export default {
  name: "DisasterReportTransmission",
  components: {},
  data() {
    return {
      SbxlOption: [],
      BdzlOption: [], // 变电站
      PdlOption: [], // 配电
      TqOption: [], // 台区
      ZykhOption: [], // 重要客户
      PtyhOption: [], // 普通用户
      dialogTableVisible: false,
      dialogTransformerSubstation: false, // 变电站
      dialogDistribution: false, // 配电
      dialogShutdownStationArea: false, //  台区及用户
      dialogImportantUsers: false, // 重要用户
      pageNum: 1,
      total: 0,
      // tableData111: [
      //   {
      //     name: "35kV古柳线",
      //     dydj: "35kV",
      //     ssdw: "国网随州供电公司",
      //     tytzyy: "过流I断动作跳闸",
      //     tdsj: "2021-08-12 08:56:09"
      //   },
      //   {
      //     name: "35kV土南线",
      //     dydj: "35kV",
      //     ssdw: "国网随州供电公司",
      //     tytzyy: "",
      //     tdsj: "2021-08-12 08:56:09"
      //   },
      //   {
      //     name: "35kV土三线",
      //     dydj: "35kV",
      //     ssdw: "国网随州供电公司",
      //     tytzyy: "过流I断动作跳闸",
      //     tdsj: "2021-08-12 08:56:09"
      //   },
      //   {
      //     name: "35kV三花线",
      //     dydj: "35kV",
      //     ssdw: "国网随州供电公司",
      //     tytzyy: "",
      //     tdsj: "2021-08-12 08:56:09"
      //   }
      // ],
      // 筛选信息
      tableData111: [],
      formData: [
        {
          elType: "select",
          id: "emergencyEvent",
          label: "应急事件",
          attrs: {
            value: "",
            size: "small",
            "collapse-tags": true,
            clearable: true
          },
          options: []
        },
        // {
        //   elType: "select",
        //   id: "operatId",
        //   label: "所属单位",
        //   // dic: "dic_xxly",
        //   attrs: {
        //     value: "",
        //     size: "small",
        //     // clearable: true,
        //     filterable: true,
        //     "collapse-tags": true,
        //     clearable: true
        //   },
        //   options: []
        // }
        {
          elType: "selectTree",
          id: "operatId",
          name: "operat",
          label: "所属单位",
          attrs: {
            value: "",
            clearable: true,
            "collapse-tags": true
          },
          options: {
            attrs: {
              value: ""
            }
          },
          treeData: {
            attrs: {
              data: []
            },
            props: {
              children: "children",
              label: "orgName",
              value: "id"
            }
          }
        }
      ],

      table: {
        isSelectFlag: false,
        compRef: "gjxm",
        isSequenceFlag: true,
        isShowPage: true,
        resetFlag: true,
        loading: false,
        title: "灾情信息统计表",
        actions: [
        ],
        tableData: [],
        columns: [
          {
            prop: "emergencyEvent",
            label: "应急事件",
            align: "left",
            "min-width": "230px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      style='color:#3561fd;cursor:pointer;text-decoration: underline;'
                      {...{
                        on: {
                          click: () => {
                            this.handleEmergencyEvents(row);
                          }
                        }
                      }}
                    >
                      {row.emergencyEvent}
                    </span>
                  }
                </div>
              );
            }
          },
          {
            prop: "unitName",
            label: "所属单位",
            align: "center",
            "min-width": "100px"
          },
          {
            prop: "",
            label: "输电线路",
            align: "center",
            "min-width": "100px",
            children: [
              {
                prop: "",
                label: "500kV及以上",
                align: "center",
                "min-width": "120px",
                children: [
                  {
                    prop: "sdxl500KvTrip",
                    label: "累计跳闸",
                    align: "center",
                    "min-width": "120px",
                    render: (h, { row }) => {
                      return (
                        <div
                          style='color:#3561fd;cursor:pointer;'
                        >
                          {
                            <span
                              style={{ textDecoration: row.sdxl500KvTrip > 0 ? "underline" : "none" }}
                              {...{
                                on: {
                                  click: () => {
                                    this.handleDiologSdxl500(row);
                                  }
                                }
                              }}
                            >
                              {row.sdxl500KvTrip}
                            </span>
                          }
                        </div>
                      );
                    }
                  },
                  {
                    prop: "sdxl500KvRecover",
                    label: "累计恢复",
                    align: "center",
                    "min-width": "120px",
                    render: (h, { row }) => {
                      return (
                        <div
                          style='color:#3561fd;cursor:pointer;'
                        >
                          {
                            <span
                              style={{ textDecoration: row.sdxl500KvRecover > 0 ? "underline" : "none" }}
                              {...{
                                on: {
                                  click: () => {
                                    this.handleDiolog(row);
                                  }
                                }
                              }}
                            >
                              {row.sdxl500KvRecover}
                            </span>
                          }
                        </div>
                      );
                    }
                  }
                ]
              },
              {
                label: "220kV",
                align: "center",
                "min-width": "120px",
                children: [
                  {
                    prop: "sdxl220KvTrip",
                    label: "累计跳闸",
                    align: "center",
                    "min-width": "120px",
                    render: (h, { row }) => {
                      return (
                        <div
                          style='color:#3561fd;cursor:pointer;'
                        >
                          {
                            <span
                              style={{ textDecoration: row.sdxl220KvTrip > 0 ? "underline" : "none" }}
                              {...{
                                on: {
                                  click: () => {
                                    this.handleDiologSdxl220(row);
                                  }
                                }
                              }}
                            >
                              {row.sdxl220KvTrip}
                            </span>
                          }
                        </div>
                      );
                    }
                  },
                  {
                    prop: "sdxl220KvRecover",
                    label: "累计恢复",
                    align: "center",
                    "min-width": "120px",
                    render: (h, { row }) => {
                      return (
                        <div
                          style='color:#3561fd;cursor:pointer;'
                        >
                          {
                            <span
                              style={{ textDecoration: row.sdxl220KvRecover > 0 ? "underline" : "none" }}
                              {...{
                                on: {
                                  click: () => {
                                    this.handleDiolog(row);
                                  }
                                }
                              }}
                            >
                              {row.sdxl220KvRecover}
                            </span>
                          }
                        </div>
                      );
                    }
                  }
                ]
              },
              {
                label: "110kV",
                align: "center",
                "min-width": "120px",
                children: [
                  {
                    prop: "sdxl110KvTrip",
                    label: "累计跳闸",
                    align: "center",
                    "min-width": "120px",
                    render: (h, { row }) => {
                      return (
                        <div
                          style='color:#3561fd;cursor:pointer;'
                        >
                          {
                            <span
                              style={{ textDecoration: row.sdxl110KvTrip > 0 ? "underline" : "none" }}
                              {...{
                                on: {
                                  click: () => {
                                    this.handleDiologSdxl110(row);
                                  }
                                }
                              }}
                            >
                              {row.sdxl110KvTrip}
                            </span>
                          }
                        </div>
                      );
                    }
                  },
                  {
                    prop: "sdxl110KvRecover",
                    label: "累计恢复",
                    align: "center",
                    "min-width": "120px",
                    render: (h, { row }) => {
                      return (
                        <div
                          style='color:#3561fd;cursor:pointer;'
                        >
                          {
                            <span
                              style={{ textDecoration: row.sdxl110KvRecover > 0 ? "underline" : "none" }}
                              {...{
                                on: {
                                  click: () => {
                                    this.handleDiolog(row);
                                  }
                                }
                              }}
                            >
                              {row.sdxl110KvRecover}
                            </span>
                          }
                        </div>
                      );
                    }
                  }
                ]
              },
              {
                label: "35kV",
                align: "center",
                "min-width": "120px",
                children: [
                  {
                    prop: "sdxl35KvTrip",
                    label: "累计跳闸",
                    align: "center",
                    "min-width": "120px",
                    render: (h, { row }) => {
                      return (
                        <div
                          style='color:#3561fd;cursor:pointer;'
                        >
                          {
                            <span
                              style={{ textDecoration: row.sdxl35KvTrip > 0 ? "underline" : "none" }}
                              {...{
                                on: {
                                  click: () => {
                                    this.handleDiologSdxl35(row);
                                  }
                                }
                              }}
                            >
                              {row.sdxl35KvTrip}
                            </span>
                          }
                        </div>
                      );
                    }
                  },
                  {
                    prop: "sdxl35KvRecover",
                    label: "累计恢复",
                    align: "center",
                    "min-width": "120px",
                    render: (h, { row }) => {
                      return (
                        <div
                          style='color:#3561fd;cursor:pointer;'
                        >
                          {
                            <span
                              style={{ textDecoration: row.sdxl35KvRecover > 0 ? "underline" : "none" }}
                              {...{
                                on: {
                                  click: () => {
                                    this.handleDiolog(row);
                                  }
                                }
                              }}
                            >
                              {row.sdxl35KvRecover}
                            </span>
                          }
                        </div>
                      );
                    }
                  }
                ]
              }
            ]
          },

          {
            label: "变电站",
            align: "center",
            "min-width": "100px",
            children: [
              {
                label: "500kV及以上",
                align: "center",
                "min-width": "120px",
                children: [
                  {
                    prop: "bdz500KvTrip",
                    label: "累计停运",
                    align: "center",
                    "min-width": "120px",
                    render: (h, { row }) => {
                      return (
                        <div
                          style='color:#3561fd;cursor:pointer;'
                        >
                          {
                            <span
                              style={{ textDecoration: row.bdz500KvTrip > 0 ? "underline" : "none" }}
                              {...{
                                on: {
                                  click: () => {
                                    this.handleDiologBdz500(row);
                                  }
                                }
                              }}
                            >
                              {row.bdz500KvTrip}
                            </span>
                          }
                        </div>
                      );
                    }
                  },
                  {
                    prop: "bdz500KvRecover",
                    label: "累计恢复",
                    align: "center",
                    "min-width": "120px",
                    render: (h, { row }) => {
                      return (
                        <div
                          style='color:#3561fd;cursor:pointer;'
                        >
                          {
                            <span
                              style={{ textDecoration: row.bdz500KvRecover > 0 ? "underline" : "none" }}
                              {...{
                                on: {
                                  click: () => {
                                    this.handleDiolog(row);
                                  }
                                }
                              }}
                            >
                              {row.bdz500KvRecover}
                            </span>
                          }
                        </div>
                      );
                    }
                  }
                ]
              },
              {
                label: "220kV",
                align: "center",
                "min-width": "120px",
                children: [
                  {
                    prop: "bdz220KvTrip",
                    label: "累计停运",
                    align: "center",
                    "min-width": "120px",
                    render: (h, { row }) => {
                      return (
                        <div
                          style='color:#3561fd;cursor:pointer;'
                        >
                          {
                            <span
                              style={{ textDecoration: row.bdz220KvTrip > 0 ? "underline" : "none" }}
                              {...{
                                on: {
                                  click: () => {
                                    this.handleDiologBdz220(row);
                                  }
                                }
                              }}
                            >
                              {row.bdz220KvTrip}
                            </span>
                          }
                        </div>
                      );
                    }
                  },
                  {
                    prop: "bdz220KvRecover",
                    label: "累计恢复",
                    align: "center",
                    "min-width": "120px",
                    render: (h, { row }) => {
                      return (
                        <div
                          style='color:#3561fd;cursor:pointer;'
                        >
                          {
                            <span
                              style={{ textDecoration: row.bdz220KvRecover > 0 ? "underline" : "none" }}
                              {...{
                                on: {
                                  click: () => {
                                    this.handleDiolog(row);
                                  }
                                }
                              }}
                            >
                              {row.bdz220KvRecover}
                            </span>
                          }
                        </div>
                      );
                    }
                  }
                ]
              },
              {
                label: "110kV",
                align: "center",
                "min-width": "120px",
                children: [
                  {
                    prop: "bdz110KvTrip",
                    label: "累计停运",
                    align: "center",
                    "min-width": "120px",
                    render: (h, { row }) => {
                      return (
                        <div
                          style='color:#3561fd;cursor:pointer;'
                        >
                          {
                            <span
                              style={{ textDecoration: row.bdz110KvTrip > 0 ? "underline" : "none" }}
                              {...{
                                on: {
                                  click: () => {
                                    this.handleDiologBdz110(row);
                                  }
                                }
                              }}
                            >
                              {row.bdz110KvTrip}
                            </span>
                          }
                        </div>
                      );
                    }
                  },
                  {
                    prop: "bdz110KvRecover",
                    label: "累计恢复",
                    align: "center",
                    "min-width": "120px",
                    render: (h, { row }) => {
                      return (
                        <div
                          style='color:#3561fd;cursor:pointer;'
                        >
                          {
                            <span
                              style={{ textDecoration: row.bdz110KvRecover > 0 ? "underline" : "none" }}
                              {...{
                                on: {
                                  click: () => {
                                    this.handleDiolog(row);
                                  }
                                }
                              }}
                            >
                              {row.bdz110KvRecover}
                            </span>
                          }
                        </div>
                      );
                    }
                  }
                ]
              },
              {
                label: "35kV",
                align: "center",
                "min-width": "120px",
                children: [
                  {
                    prop: "bdz35KvTrip",
                    label: "累计停运",
                    align: "center",
                    "min-width": "120px",
                    render: (h, { row }) => {
                      return (
                        <div
                          style='color:#3561fd;cursor:pointer;'
                        >
                          {
                            <span
                              style={{ textDecoration: row.bdz35KvTrip > 0 ? "underline" : "none" }}
                              {...{
                                on: {
                                  click: () => {
                                    this.handleDiologBdz35(row);
                                  }
                                }
                              }}
                            >
                              {row.bdz35KvTrip}
                            </span>
                          }
                        </div>
                      );
                    }
                  },
                  {
                    prop: "bdz35KvRecover",
                    label: "累计恢复",
                    align: "center",
                    "min-width": "120px",
                    render: (h, { row }) => {
                      return (
                        <div
                          style='color:#3561fd;cursor:pointer;'
                        >
                          {
                            <span
                              style={{ textDecoration: row.bdz35KvRecover > 0 ? "underline" : "none" }}
                              {...{
                                on: {
                                  click: () => {
                                    this.handleDiolog(row);
                                  }
                                }
                              }}
                            >
                              {row.bdz35KvRecover}
                            </span>
                          }
                        </div>
                      );
                    }
                  }
                ]
              }
            ]
          },
          //
          {
            label: "配电线路",
            align: "center",
            "min-width": "100px",
            children: [
              {
                label: "10kV",
                align: "center",
                "min-width": "120px",
                children: [
                  {
                    prop: "pdxl10KvTrip",
                    label: "累计跳闸",
                    align: "center",
                    "min-width": "120px",
                    render: (h, { row }) => {
                      return (
                        <div
                          style='color:#3561fd;cursor:pointer;'
                        >
                          {
                            <span
                              style={{ textDecoration: row.pdxl10KvTrip > 0 ? "underline" : "none" }}
                              {...{
                                on: {
                                  click: () => {
                                    this.handleDiologPdxl10(row);
                                  }
                                }
                              }}
                            >
                              {row.pdxl10KvTrip}
                            </span>
                          }
                        </div>
                      );
                    }
                  },
                  {
                    prop: "pdxl10KvRecover",
                    label: "累计恢复",
                    align: "center",
                    "min-width": "120px",
                    render: (h, { row }) => {
                      return (
                        <div
                          style='color:#3561fd;cursor:pointer;'
                        >
                          {
                            <span
                              style={{ textDecoration: row.pdxl10KvRecover > 0 ? "underline" : "none" }}
                              {...{
                                on: {
                                  click: () => {
                                    this.handleDiolog(row);
                                  }
                                }
                              }}
                            >
                              {row.pdxl10KvRecover}
                            </span>
                          }
                        </div>
                      );
                    }
                  }
                ]
              }
            ]
          },
          {
            label: "台区",
            align: "center",
            "min-width": "120px",
            children: [
              {
                prop: "tqTrip",
                label: "累计停电",
                align: "center",
                "min-width": "120px",
                render: (h, { row }) => {
                  return (
                    <div
                      style='color:#3561fd;cursor:pointer;'
                    >
                      {
                        <span
                          style={{ textDecoration: row.tqTrip > 0 ? "underline" : "none" }}
                          {...{
                            on: {
                              click: () => {
                                this.handleDiologTq(row);
                              }
                            }
                          }}
                        >
                          {row.tqTrip}
                        </span>
                      }
                    </div>
                  );
                }
              },
              {
                prop: "tqRecover",
                label: "累计恢复",
                align: "center",
                "min-width": "120px",
                render: (h, { row }) => {
                  return (
                    <div
                      style='color:#3561fd;cursor:pointer;'
                    >
                      {
                        <span
                          style={{ textDecoration: row.tqRecover > 0 ? "underline" : "none" }}
                          {...{
                            on: {
                              click: () => {
                                this.handleDiolog(row);
                              }
                            }
                          }}
                        >
                          {row.tqRecover}
                        </span>
                      }
                    </div>
                  );
                }
              },
              {
                prop: "tqRater",
                label: "恢复率",
                align: "center",
                "min-width": "120px"
              }
            ]
          },
          {
            label: "用户",
            align: "center",
            "min-width": "120px",
            children: [
              {
                prop: "ptyhTrip",
                label: "累计停电",
                align: "center",
                "min-width": "120px",
                render: (h, { row }) => {
                  return (
                    <div
                      style='color:#3561fd;cursor:pointer;'
                    >
                      {
                        <span
                          style={{ textDecoration: row.ptyhTrip > 0 ? "underline" : "none" }}
                          {...{
                            on: {
                              click: () => {
                                // this.handleDiologYh(row);
                              }
                            }
                          }}
                        >
                          {row.ptyhTrip}
                        </span>
                      }
                    </div>
                  );
                }
              },
              {
                prop: "ptyhRecover",
                label: "累计恢复",
                align: "center",
                "min-width": "120px",
                render: (h, { row }) => {
                  return (
                    <div
                      style='color:#3561fd;cursor:pointer;'
                    >
                      {
                        <span
                          style={{ textDecoration: row.ptyhRecover > 0 ? "underline" : "none" }}
                          {...{
                            on: {
                              click: () => {
                                // this.handleDiolog(row);
                              }
                            }
                          }}
                        >
                          {row.ptyhRecover}
                        </span>
                      }
                    </div>
                  );
                }
              },
              {
                prop: "ptyhRater",
                label: "恢复率",
                align: "center",
                "min-width": "120px"
              }
            ]
          },
          {
            label: "重要用户",
            align: "center",
            "min-width": "120px",
            children: [
              {
                prop: "zyyhTrip",
                label: "累计停电",
                align: "center",
                "min-width": "120px",
                render: (h, { row }) => {
                  return (
                    <div
                      style='color:#3561fd;cursor:pointer;'
                    >
                      {
                        <span
                          style={{ textDecoration: row.zyyhTrip > 0 ? "underline" : "none" }}
                          {...{
                            on: {
                              click: () => {
                                this.handleZyyh(row);
                              }
                            }
                          }}
                        >
                          {row.zyyhTrip}
                        </span>
                      }
                    </div>
                  );
                }
              },
              {
                prop: "zyyhRecover",
                label: "累计恢复",
                align: "center",
                "min-width": "120px",
                render: (h, { row }) => {
                  return (
                    <div
                      style='color:#3561fd;cursor:pointer;'
                    >
                      {
                        <span
                          style={{ textDecoration: row.zyyhRecover > 0 ? "underline" : "none" }}
                          {...{
                            on: {
                              click: () => {
                                this.handleDiolog(row);
                              }
                            }
                          }}
                        >
                          {row.zyyhRecover}
                        </span>
                      }
                    </div>
                  );
                }
              },
              {
                prop: "zyyhRater",
                label: "累计率",
                align: "center",
                "min-width": "120px"
              }
            ]
          }
        ],
        tableAttr: {
          "max-height": "430px",
          height: "430px",
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        }
      },
      tableList: {
        isSelectFlag: true,
        compRef: "rwxx",
        isSequenceFlag: true,
        isShowPage: true,
        resetFlag: true,
        loading: false,
        title: "灾情信息报送单列表",
        actions: [
          // {
          //   id: "dialogVisible",
          //   text: "新增",
          //   type: "primary",
          //   btnAttr: { size: "small" }
          // },
          // {
          //   id: "dialogVisible",
          //   text: "研判",
          //   type: "",
          //   btnAttr: { size: "small" }
          // }
          // {
          //   // id: "dialogVisible",
          //   text: "导出",
          //   type: "",
          //   btnAttr: { size: "small" }
          // }
        ],
        tableData: [
          {
            lineName: "",
            lineCode: "",
            blackoutTime: "",
            tripCause: "",
            voltageClasses: "",
            unitName: "",
            unitId: ""
          }
        ],
        columns: [
          {
            label: "停运输电线路名称",
            align: "center",
            "min-width": "180px",
            render: (h, { row }) => {
              return (
                <div class='peizhi'>
                  <LsdForm
                    compData={{
                      elType: "select",
                      name: "lineName",
                      id: "lineCode",
                      label: "停运输电线路名称",
                      // dic: "dic_zrbm",
                      attrs: {
                        value: "",
                        clearable: true,
                        filterable: true,
                        disabled: false,
                        multiple: false,
                        "collapse-tags": true
                      },
                      options: this.SbxlOption

                    }}
                    form={row}
                    {...{
                      on: {
                        change: (item) => {
                          console.log(item);
                          this.aaaClick(item, row);
                        }
                      }
                    }}
                  ></LsdForm>
                </div>
              );
            }
          },
          {
            prop: "voltageClasses",
            label: "电压等级",
            align: "center",
            "min-width": "70px"
          },
          {
            prop: "unitName",
            id: "unitId",
            label: "所属单位",
            align: "center",
            "min-width": "120px"
          },
          {
            // prop: "taskContent",
            label: "停运/跳闸原因",
            align: "center",
            "min-width": "180px",
            render: (h, { row }) => {
              return (
                <div class='peizhi'>
                  <LsdForm
                    compData={{
                      elType: "input",
                      id: "tripCause",
                      label: "停运/跳闸原因",
                      attrs: {
                        // disabled:
                        //   _this.operat === "review" ||
                        //   !["task999"].includes(_this.$route.query.task) ||
                        //   ["task2", "task3"].includes(
                        //     _this.$route.query.returnFlow
                        //   ),
                        disabled: false,
                        value: "",
                        placeholder: "请输入",
                        min: 0,
                        type: "text"
                      }
                    }}
                    form={row}
                    {...{
                      on: {}
                    }}
                  ></LsdForm>
                </div>
              );
            }
          },
          {
            // prop: "taskContent",
            label: "停电时间",
            align: "center",
            "min-width": "180px",
            render: (h, { row }) => {
              return (
                <div class='peizhi'>
                  <LsdForm
                    compData={{
                      // elType: "dateTimePicker",
                      // id: "occurrenceTime",
                      // label: "停电时间",
                      // attrs: {
                      //   // disabled:
                      //   //   _this.operat === "review" ||
                      //   //   !["task999"].includes(_this.$route.query.task) ||
                      //   //   ["task2", "task3"].includes(
                      //   //     _this.$route.query.returnFlow
                      //   //   ),
                      //   disabled: false,
                      //   value: "",
                      //   placeholder: "请输入",
                      //   min: 0,
                      //   type: "text"
                      // }


                      elType: "dateTimePicker",
                      id: "blackoutTime",
                      label: "停电时间",
                      attrs: {
                        value: "",
                        size: "small",
                        type: "datetime",
                        "value-format": "yyyy-MM-dd HH:mm:ss"
                      }
                    }}
                    form={row}
                    {...{
                      on: {}
                    }}
                  ></LsdForm>
                </div>
              );
            }
          },
          //   {
          //   elType: "dateTimePicker",
          //   id: "occurrenceTime",
          //   label: "发生时间",
          //   attrs: {
          //     value: "",
          //     size: "small",
          //     type: "datetime",
          //     "value-format": "yyyy-MM-dd HH:mm:ss"
          //   }
          // },
          {
            prop: "cz",
            label: "操作",
            align: "center",
            fixed: "right",
            "min-width": "50px",
            render: (h, scope) => {
              // console.log(scope,">>>>>>>>>>>>>>>>>>row");
              return (
                <div>
                  {
                    scope.$index === this.tableList.tableData.length - 1 && (

                      <el-button
                        {...{
                          class: {},
                          style: {},
                          attrs: {
                            type: "text",
                            icon: "el-icon-plus",
                            size: "small"
                          },
                          on: {
                            click: (scope) => {
                              this.tableList.tableData.push({
                                lineName: "",
                                lineCode: "",
                                blackoutTime: "",
                                tripCause: "",
                                voltageClasses: "",
                                unitName: "",
                                unitId: ""
                              });
                            }
                          }
                        }}
                      />
                    )
                  }
                  <el-button
                    {...{
                      class: {},
                      style: {},
                      attrs: {
                        type: "text",
                        icon: "el-icon-minus",
                        size: "small"
                      },
                      on: {
                        click: () => {
                          console.log(scope);
                          if (scope.$index < 1) {
                            return;
                          }
                          this.tableList.tableData.splice(scope.$index, 1);
                        }
                      }
                    }}
                  />
                </div>
              );
            }
          }
        ],
        tableAttr: {
          "max-height": "470px",
          height: "470px",
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        }
      },
      // paginationAtrrs: {
      //   total: 0,
      //   layout: "total, sizes, prev, pager, next, jumper",
      //   "current-page": 1,
      //   "page-size": 10,
      //   "page-sizes": [10, 20, 30, 40, 50, 100]
      // },
      paginationAtrrs: {
        total: 0,
        "background": true,
        layout: "prev, pager, next",
        "current-page": 1,
        "page-size": 10
      },
      activeNames: ["1", "2", "3", "4"],
      form: {},
      multipleSelection: [],
      // 弹窗信息
      dialogConfig: {
        title: "灾情信息报送单",
        isShow: false,
        btnList: [
          // {
          //   name: "提交",
          //   id: "BSubmitSb", // 事件名
          //   type: "primary",
          //   size: "small"
          // },
          // {
          //   name: "保存",
          //   id: "BSave", // 事件名
          //   size: "small"
          // },
          {
            name: "取消",
            id: "getBack", // 事件名
            size: "small"
          }
        ]
      },
      // 折叠面板信息
      titleConfig: [
        {
          title: "信息",
          name: "1",
          slot: "slot1"
        },
        {
          title: "输电线路",
          name: "2",
          slot: "slot2"
        },
        {
          title: "变电站",
          name: "3",
          slot: "slot3"
        }
      ],
      formConfig: {
        formData: [
          {
            type: "select",
            label: "信息来源",
            prop: "yjtzd",
            class: "half",
            lableWidth: "100px"
          },
          {
            type: "select",
            label: "响应命令单",
            prop: "yjtszd",
            class: "half",
            lableWidth: "100px"
          }
        ],
        rules: {
          yjtzd: [
            { required: true, message: "请选择响应命令单", trigger: "blur" }
          ]
        }
      },

      rules: {
        name: [
          { required: true, message: "请输入预警信息名称", trigger: "blur" }
        ]
      },
      options: {
        dic_sjlb: [],
        dic_sjjb: [],
        dic_yxfw: [],
        dic_xxly: [],
        dic_zrbm: []
      }
    };
  },
  created() {
    this.list();
    this.getInputVal();
  },
  methods: {
    handleDiolog(val) {
      console.log(val);
      // this.dialogTableVisible = true
    },
    // 列表组织机构查询
    handleSelectTreeTabulation(arg, item) {
      if (item.id === "operatId") {
        this.$set(this.form, "operat", arg[0].id);
        this.$set(this.form, "operatId", arg[0].orgName);
      }
    },
    // 输电线路 500
    async handleDiologSdxl500(val) {
      // console.log(val, "500kV......")
      this.dialogTableVisible = true;
      const parmas = {
        pageNum: this.pageNum,
        pageSize: 10,
        specialtyCode: "sdxl", // 线路编码
        emergencyId: val.emergencyId, // 应急事件id
        unitId: val.unitId, //	所属单位id
        voltageClasses: "500kV" // 电压等级
      };
      const res = await getInfoDetailList(parmas);
      // console.log(res)
      this.total = res.total;
      this.tableData111 = res.data;
    },
    // 输电线路 220
    async handleDiologSdxl220(val) {
      this.dialogTableVisible = true;
      const parmas = {
        pageNum: this.pageNum,
        pageSize: 10,
        specialtyCode: "sdxl", // 线路编码
        emergencyId: val.emergencyId, // 应急事件id
        unitId: val.unitId, //	所属单位id
        voltageClasses: "220kV" // 电压等级
      };
      const res = await getInfoDetailList(parmas);
      // console.log(res)
      this.total = res.total;
      this.tableData111 = res.data;
    },
    // 输电线路 110
    async handleDiologSdxl110(val) {
      this.dialogTableVisible = true;
      const parmas = {
        pageNum: this.pageNum,
        pageSize: 10,
        specialtyCode: "sdxl", // 线路编码
        emergencyId: val.emergencyId, // 应急事件id
        unitId: val.unitId, //	所属单位id
        voltageClasses: "110kV" // 电压等级
      };
      const res = await getInfoDetailList(parmas);
      // console.log(res)
      this.total = res.total;
      this.tableData111 = res.data;
    },
    // 输电线路 35
    async handleDiologSdxl35(val) {
      this.dialogTableVisible = true;
      const parmas = {
        pageNum: this.pageNum,
        pageSize: 10,
        specialtyCode: "sdxl", // 线路编码
        emergencyId: val.emergencyId, // 应急事件id
        unitId: val.unitId, //	所属单位id
        voltageClasses: "35kV" // 电压等级
      };
      const res = await getInfoDetailList(parmas);
      // console.log(res)
      this.total = res.total;
      this.tableData111 = res.data;
    },
    // 变电站
    // 500
    async handleDiologBdz500(val) {
      this.dialogTransformerSubstation = true;
      const parmas = {
        pageNum: this.pageNum,
        pageSize: 10,
        specialtyCode: "bdz", // 线路编码
        emergencyId: val.emergencyId, // 应急事件id
        unitId: val.unitId, //	所属单位id
        voltageClasses: "500kV" // 电压等级
      };
      const res = await getInfoDetailList(parmas);
      // console.log(res)
      this.total = res.total;
      this.tableData111 = res.data;
    },
    // 220
    async handleDiologBdz220(val) {
      this.dialogTransformerSubstation = true;
      const parmas = {
        pageNum: this.pageNum,
        pageSize: 10,
        specialtyCode: "bdz", // 线路编码
        emergencyId: val.emergencyId, // 应急事件id
        unitId: val.unitId, //	所属单位id
        voltageClasses: "220kV" // 电压等级
      };
      const res = await getInfoDetailList(parmas);
      // console.log(res)
      this.total = res.total;
      this.tableData111 = res.data;
    },
    // 110
    async handleDiologBdz110(val) {
      this.dialogTransformerSubstation = true;
      const parmas = {
        pageNum: this.pageNum,
        pageSize: 10,
        specialtyCode: "bdz", // 线路编码
        emergencyId: val.emergencyId, // 应急事件id
        unitId: val.unitId, //	所属单位id
        voltageClasses: "110kV" // 电压等级
      };
      const res = await getInfoDetailList(parmas);
      // console.log(res)
      this.total = res.total;
      this.tableData111 = res.data;
    },
    // 35
    async handleDiologBdz35(val) {
      this.dialogTransformerSubstation = true;
      const parmas = {
        pageNum: this.pageNum,
        pageSize: 10,
        specialtyCode: "bdz", // 线路编码
        emergencyId: val.emergencyId, // 应急事件id
        unitId: val.unitId, //	所属单位id
        voltageClasses: "35kV" // 电压等级
      };
      const res = await getInfoDetailList(parmas);
      // console.log(res)
      // console.log(res)
      this.total = res.total;
      this.tableData111 = res.data;
      // console.log(this.tableData111, "this.tableData111")
    },
    // 配电线路
    // 10
    async handleDiologPdxl10(val) {
      this.dialogDistribution = true;
      const parmas = {
        pageNum: this.pageNum,
        pageSize: 10,
        specialtyCode: "pdxl", // 线路编码
        emergencyId: val.emergencyId, // 应急事件id
        unitId: val.unitId, //	所属单位id
        voltageClasses: "10kV" // 电压等级
      };
      const res = await getInfoDetailList(parmas);
      // console.log(res)
      this.total = res.total;
      this.tableData111 = res.data;
    },
    // 台区
    async handleDiologTq(val) {
      this.dialogShutdownStationArea = true;
      const parmas = {
        pageNum: this.pageNum,
        pageSize: 10,
        specialtyCode: "tq", // 线路编码
        emergencyId: val.emergencyId, // 应急事件id
        unitId: val.unitId, //	所属单位id
        voltageClasses: "" // 电压等级
      };
      const res = await getInfoDetailList(parmas);
      // console.log(res)
      this.total = res.total;
      this.tableData111 = res.data;
    },
    // 用户
    async handleDiologYh(val) {
      const parmas = {
        pageNum: this.pageNum,
        pageSize: 10,
        specialtyCode: "ptyh", // 线路编码
        emergencyId: val.emergencyId, // 应急事件id
        unitId: val.unitId, //	所属单位id
        voltageClasses: "" // 电压等级
      };
      const res = await getInfoDetailList(parmas);
      // console.log(res)
      this.total = res.total;
      this.tableData111 = res.data;
    },
    // 重要用户
    async handleZyyh(val) {
      this.dialogImportantUsers = true;
      const parmas = {
        pageNum: this.pageNum,
        pageSize: 10,
        specialtyCode: "zyyh", // 线路编码
        emergencyId: val.emergencyId, // 应急事件id
        unitId: val.unitId, //	所属单位id
        voltageClasses: "" // 电压等级
      };
      const res = await getInfoDetailList(parmas);
      // console.log(res)
      this.total = res.total;
      this.tableData111 = res.data;
    },

    async aaaClick(val, row) {
      console.log(val);
      console.log(row);
      const res = await getCircuitDetailData({ lineCode: val });
      console.log(res);
      row.voltageClasses = res.voltageClasses;
      row.unitName = res.unitName;
      row.unitId = res.unitId;

    },
    async bbbClick(val, row) {
      console.log(val);
      console.log(row);
      const res = await getCircuitDetailData({ lineCode: val });
      console.log(res);
      row.voltageClasses = res.voltageClasses;
      row.unitName = res.unitName;
      row.unitId = res.unitId;
    },
    // 配电下拉
    onSubmit() { },
    // 重置
    reset() {
      this.form = this.$options.data().form;
      this.pageNum = 1;
      this.$refs.gjxm.paginationAtrrsInner["current-page"] = 1;
      this.list();
    },
    // 查询
    async query() {
      const parmas = {
        pageNum: this.pageNum,
        pageSize: 10,
        emergencyId: this.form.emergencyEvent, // 应急事件
        unitId: this.form.operat
      };
      // statisticInfoSearchPage
      // const res = await getStatisticInfoData(parmas)
      const res = await statisticInfoSearchPage(parmas);
      this.table.tableData = res.data;
      this.paginationAtrrs.total = res.total;
    },
    // getInputVal() {

    // },
    handleBtn(item) {
      this[item.id]();
    },
    handleBtn0(item) {
      this[item.id]();
    },
    handleBtn1(item) {
      this[item.id]();
    },
    resetForm() {
      this.tableConfig.formData = this.$options.data().tableConfig.formData;
      this.list();
    },
    // 获取下拉框数据
    getInputVal() {
      // const parmas = {
      //   orgType: 'unit'
      // }
      this.formData.map(item => {
        if (item.label === "应急事件") {
          // homePageSelete().then(res => {
          emergencyEventsPageSelete().then(res => {
            console.log(res);
            const option = res.map((item) => {
              // console.log(item)
              var emergencyEvent = item.emergencyEvent;
              return {
                label: emergencyEvent,
                value: item.id
              };
            });
            item.options = option;

          });
        }
      });
      // const parmas = {
      //   orgType: "unit"
      // };
      this.formData.map(item => {
        // if (item.label === "所属单位") {
        //   getOrganizationList(parmas).then(res => {
        //     console.log(res);
        //     const option = res.map((item) => {
        //       // console.log(item)
        //       var operatId = item.orgName;
        //       return {
        //         label: operatId,
        //         value: item.orgCode
        //       };
        //     });
        //     item.options = option;

        //   });
        // }
        if (item.elType === "selectTree") {
          GetOrgTree().then(res => {
            this.$nextTick(() => {
              if (item.label === "所属单位") {
                this.$set(this.formData[1].treeData.attrs, "data", res);
              }
              // this.$set(this.config.formData[5].treeData.attrs, "data", res)
            });
            // console.log(this.selectTreeList, "selectTreeListselectTreeListselectTreeList");
          });
        }
      });
      this.formData.forEach((item) => {
        if (item.dic) {
          getDictByGroupEmergency({ groupCode: item.dic }).then(res => {
            const option = res.map((item) => {
              return {
                label: item.dicName,
                value: Number(item.dicCode)
              };
            });
            item.options = option;
          });
        }
      });
      this.formConfig.formData.forEach((item) => {
        if (item.dic) {
          getDictByGroupEmergency({ groupCode: item.dic }).then(res => {
            const option = res.map((item) => {
              return {
                label: item.dicName,
                value: Number(item.dicCode)
              };
            });
            item.option = option;
          });
        }
      });
    },
    // 列表
    async list() {
      const parmas = {
        pageNum: this.pageNum,
        pageSize: 10,
        emergencyEvent: this.form.emergencyEvent // 应急事件
      };
      const res = await getStatisticInfoData(parmas);
      console.log(res);
      this.table.tableData = res.data;
      this.paginationAtrrs.total = res.total;
    },
    onActionClick(item, index) {
      this[item.id](); // 调用按钮对应方法
    },
    distributionDataClick(item) {
      this[item.id]();
    },
    marketingDataDataClick(item) {
      this[item.id]();
    },
    // 应急事件 下拉监听
    // handleSelectionChange(val) {
    //   console.log(val)
    //   getYjsjGetById({ id: val }).then(res => {
    //     console.log(res)
    //     this.$refs.formConfigData.form = res
    //   })
    // },
    //
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    selectChange(e, i) {
      if (i.label === "部门") {
        // this.tableSelectNum = e[0]
      }
    },
    // 分页
    handleCurrentChange(val) {
      this.pageNum = val;
      this.list();
    },
    // 应急事件
    handleEmergencyEvents(val) {
      console.log(val);
      this.$router.push({
        path: "/EmergencyDetail",
        query: { id: val.emergencyId }
      });
    },
    // 返回
    getBack() {
      this.dialogConfig.isShow = false;
    },
    // 分页
    handleSizeChange(val) {
      this.pageNum = val["current-page"];
      this.pageSize = val["page-size"];
      // this.list()
    }
  }
};
</script>

<style scoped lang="less">
// @import "../../../assets/style/ComponentStyle.less";
@import "../../../assets/style/common.less";
@import "../../../assets/style/ComponentStyle.less";
@import "../../../assets/style/pop-upNotification.less";

:deep(.el-breadcrumb__inner.is-link) {
  font-weight: 100;
  color: #fff;
}

.EmergencyList :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #3270ff;
}

.box {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 15px;
  background-color: #fff;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
}

:deep(.el-table__fixed-body-wrapper) {
  height: 304px !important;
}

:deep(.el-table__fixed) {
  bottom: 0 !important;
}

.borderBottomBlue {
  border-bottom: 1px solid #31baee;
}
</style>
